<template>
  <a-collapse-panel name="ElementFormSupported">
    <template #header>
      <collapse-title title="表单">
        <lucide-icon name="PlayCircle" />
      </collapse-title>
    </template>
    <div>
      <edit-item label="类型">
        <a-select
          v-model:value="form.formHandlerClass"
          @change="setElementClass()"
          placeholder="请选择"
          style="width: 100%"
        >
          <a-select-option v-for="item in classOptions" :key="item.value" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </edit-item>
      <edit-item label="表单key" v-if="form.formHandlerClass === 'formKey'">
        <a-input v-if="!formKeyApi" v-model:value="form.formKey" @change="setElementFormKey()" />
        <TableSelect
          v-model:value="form.formKey"
          multi="radio"
          title="请选择表单"
          :api="formKeyApi"
          @change="(keys, row) => setElementFormKey(row)"
          v-else
        />
      </edit-item>
      <edit-item label="表单参考" v-if="form.formHandlerClass === 'formRef'">
        <a-input v-model:value="form.formRef" @change="setElementFormRef()" />
      </edit-item>
      <edit-item label="Binding" v-if="form.formHandlerClass === 'formRef'">
        <a-select
          v-model:value="form.formRefBinding"
          @change="setElementBinding()"
          placeholder="请选择"
          style="width: 100%"
        >
          <a-select-option v-for="item in bindingOptions" :key="item.value" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </edit-item>
      <edit-item
        label="Version"
        v-if="form.formHandlerClass === 'formRef' && form.formRefBinding === 'version'"
      >
        <a-input v-model:value="form.formRefVersion" @change="setElementVersion()" />
      </edit-item>
    </div>
  </a-collapse-panel>
</template>

<script>
import { setElementValues } from '@/bo-utils/commonUtil'
import {
  addFormData,
  removeFormData,
  getProperties
} from "@/bo-utils/FormSupporUtil";
import EventEmitter from '@/utils/EventEmitter'
import modelerStore from '@/store/modeler'
import EditItem from '@/components/common/EditItem.vue'
import TableSelect from "@/components/common/TableSelect.vue";
import { Select } from 'ant-design-vue';
import { mapState } from 'pinia'
export default {
  name: "ElementFormSupported",
  components: { EditItem, TableSelect },
  title: "表单",
  icon: "file-excel",
  props: {
    formKeyApi: {
      type: Function,
      default: () => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve({
              total: 100,
              result: [
                { label: '请假单', value: 'test1' },
                { label: '出差申请单', value: 'test2' }
              ]
            })
          }, 2000)
        })
      }
    }
  },
  computed: {
    ...mapState(modelerStore, ['getActive', 'getActiveId'])
  },
  components: {
    'a-select': Select,
    TableSelect
  },
  data() {
    return {
      form: {
        formHandlerClass: "",
        formKey: "",
        formRef: "",
        formRefBinding: "",
        formRefVersion: ""
      },
      classOptions: [
        { label: "无", value: "" },
        { label: "Camunda表单", value: "formRef" },
        { label: "嵌入式或外部表单", value: "formKey" },
        { label: "生成的任务表单", value: "formData" }
      ],
      bindingOptions: [
        { label: "deployment", value: "deployment" },
        { label: "latest", value: "latest" },
        { label: "version", value: "version" }
      ]
    };
  },
  mounted() {
    this.getElementAttr();
    EventEmitter.on("element-update", this.getElementAttr);
  },
  methods: {
    getElementAttr() {
      this.form = getProperties(this.getActive);
      this.form.formKey = this.form.formKeyLabel || this.form.formKey;
    },
    setElementClass() {
      // formData需要新增一个扩展属性
      const element = this.getActive;
      if (this.form["formHandlerClass"] === "formData") {
        addFormData(element, {});
      } else {
        removeFormData(element);
      }
    },
    setElementFormKey(row) {
      this.form.formRef = null
      this.form.formRefBinding = null
      this.form.formRefVersion = null
      const element = this.getActive;
      setElementValues(element, {
        formKey: this.form["formKey"],
        formKeyLabel: row ? row[0]?.label : "",
        formRef: null,
        formRefBinding: null,
        formRefVersion: null
      });
    },
    setElementFormRef() {
      const element = this.getActive;
      setElementValues(element, {
        formRef: this.form["formRef"],
        formKey: null
      });
    },
    setElementBinding() {
      const element = this.getActive;
      setElementValues(element, {
        formRefBinding: this.form["formRefBinding"],
        formKey: null
      });
    },
    setElementVersion() {
      const element = this.getActive;
      setElementValues(element, {
        formRefVersion: this.form["formRefVersion"],
        formKey: null
      });
    }
  }
};
</script>
